<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        html,
        body {
            font-size: 20px;
            background-color: #fff;
            line-height: 1;
        }


    </style>
</head>

<body>
    <!-- 头部搜索  消息-->
    <header id="header" style="padding-top:25px;">
        <div class="msg_box" onclick="closeYM()">
            <img src="../../../image/left.png" alt="">
        </div>

        <ul class="search_box">
            <li class="active" onclick="openF(0)">商品</li>
            <li onclick="openF(1)">详情</li>
            <li onclick="openF(2)">评价</li>
        </ul>

        <div class="msg_box">
            <img style="height:0.95rem;width:0.95rem;" src="../../../image/mall/share_img.png" alt="">
        </div>
    </header>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function() {
        var headerH = $api.offset($api.byId('header')).h;

        api.openFrame({
            name: 'mall_commodity',
            url: './../mall_commodity.html',
            rect: {
                x: 0,
                y: headerH,
                w: 'auto',
                h: api.frameHeight - headerH
            },
            pageParam: {
                name: 'test'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    };

    function closeYM() {
        api.closeWin({});
    }

    var arrName = [{
        name: 'mall_commodity',
        frame: true,
        isBounes: false,
        url: './../mall_commodity.html'
    }, {
        name: 'mall_details',
        frame: true,
        isBounes: false,
        url: 'https://www.baidu.com/'
    }, {
        name: 'mall_comment',
        frame: true,
        isBounes: false,
        url: './../mall_comment.html'
    }]

    function openF(num) {
        var headerH = $api.offset($api.byId('header')).h;
        $('.search_box li').removeClass('active')
        $('.search_box li').eq(num).addClass('active')
        if (arrName[num].frame) {
            api.openFrame({
                name: arrName[num].name,
                url: arrName[num].url,
                rect: {
                    x: 0,
                    y: headerH,
                    w: 'auto',
                    h: api.frameHeight - headerH
                },
                pageParam: {
                    name: 'test'
                },
                bounces: arrName[num].isBounes
            });
            arrName[num].frame = !arrName[num].frame
        } else {
            api.bringFrameToFront({
                from: arrName[num].name
            });
        }
    }
</script>

</html>
